<template>
    <view class="content">
        <view class="header_view">
           <view class="header-box">
              <view class="title_view">反馈问题点</view>
            <view class="des_view">功能异常:  功能故障或不可用</view>
           </view>
        </view>
          <view class="cont-box">
           <view class="common">
              <view class="title">请补充反馈的详细问题或建议</view>
              <textarea class="input" @input="changeContent" placeholder-style="color:#999;font-size: 30rpx;line-height: 36rpx;" placeholder="请输入不少于10个子的问题描述" />
            </view>
            <view class="common">
              <view class="title">请提供相关问题的截图或照片</view>
               <view class="row_view">
            <!-- <image src="@/static/img/img.png" class="camear_icon"  @click="sendPhotoBtn()"></image> -->
        </view>

        <!-- <view class="add_text">已添加 {{imageArray.length}}/9 张图片</view> -->
            </view>
          </view>
        <bottom-button  @sendFun="valuationBtn" text="确认提交"></bottom-button>
    </view>
</template>

<script>

export default {
    data() {
        return {
            issel: true,
            prompt: '',
            title: [],
            imageArray: [],
            content: '',
            ct: '',
            cid: '',
            type: 1,
            goodsId: '',
            title: '',
            orderId: ''
        }
    },
    onLoad(option) {
        if (option.type) this.type = option.type
        this.prompt = option.name
        this.cid = option.cid
        this.goodsId = option.goodsId;
        this.title = option.title
        this.orderId = option.orderId
    },
    methods: {

        changeCt(e) {
            this.ct = e.detail.value;
        },
        async valuationBtn() {
           
            uni.showLoading({
                title: "加载中"
            });
            if (this.orderId) {
                const params = {
                    "clientType": 1,
                    "content": this.content,
                    "images": this.imageArray.join(','),
                    "contactInformation": this.ct,
                    orderId: this.orderId
                };
                csIntervenePlus(params).then(res => {
                    uni.hideLoading();
                    this.Common.showMessage(res.message)
                    if (res.success) {
                        let pages = getCurrentPages(); // 当前页面
                        let beforePage = pages[pages.length - 2]; // 上一页
                        uni.navigateBack({
                            success: function () {
                                beforePage.$vm.reloadList(); // 执行上一页的onLoad方法
                            }
                        });
                    }
                })
            } else {
                const params = {
                    "clientType": 1,
                    "content": this.content,
                    "ctype": this.type,
                    "catagoryId": this.cid,//反馈类目
                    "images": this.imageArray.join(','),
                    "contactInformation": this.ct
                };

                if (this.goodsId) {
                    params.goodsId = this.goodsId
                    params.title = this.title
                }
                feedbackAdd(params).then(res => {
                    uni.hideLoading();
                    this.Common.showMessage(res.message)
                    if (res.success) {
                        uni.navigateBack({
                            delta: 1
                        })
                    }
                })
            }

        },
        changeContent(e) {
            this.content = e.detail.value;
        },
        async updatePhoto(imageSrc, aliyunFileKey, res) {
            const resphoto = await upload(
                imageSrc,
                aliyunFileKey,
                res.result.postPolicy.path,
                res.result.postPolicy.policy,
                res.result.postPolicy.accessId,
                res.result.postPolicy.signature,
                res.result.host
            );
            if (resphoto.statusCode == 200) {
                this.imageArray.push(res.result.url);
                this.images = this.imageArray.join(",");
            }
        },
        async fetch(imageSrc, aliyunFileKey) {
            const res = await getGenStorageInfo('png', 23);
            console.log(JSON.stringify(res));
            if (res.code == 200) {
                this.updatePhoto(imageSrc, aliyunFileKey, res);
            }
        },
        sendPhotoBtn() {
            let that = this;
            let imgLen = 9 - that.imageArray.length;
            uni.showActionSheet({
                itemList: ['拍摄', '从相册选取'],
                success(res) {
                    if (res.tapIndex == 0) {
                        uni.chooseImage({
                            count: 1,
                            sizeType: ['compressed'],
                            sourceType: ['camera'],
                            success: async (res) => {
                                let images = res.tempFilePaths;
                                for (let i = 0; i < images.length; i++) {
                                    that.fetch(images[i]);
                                }
                            },

                        })
                    } else if (res.tapIndex == 1) {
                        uni.chooseImage({
                            count: imgLen,
                            sizeType: ['compressed'],
                            sourceType: ['album'],
                            success: async (res) => {
                                let images = res.tempFilePaths;
                                for (let i = 0; i < images.length; i++) {
                                    that.fetch(images[i]);
                                }
                            },
                        })

                    }
                }
            })
        },
    }
}
</script>

<style lang="scss">
view{
font-size: 30rpx;
color: #222;
}
 .header_view {
    border-top:12rpx solid #F1F4FB;
    width:calc(100% - 60rpx) ;
    padding: 42rpx 30rpx 0;
    
    .header-box{
      padding-bottom: 34rpx;
       border-bottom: 1px solid #F1F4FB;
      .title_view{
        color: #999999;
        padding-bottom: 30rpx;
      }
    }
   
  }
  .cont-box{
    padding: 0 30rpx 146rpx;
     width:calc(100% - 60rpx) ;
    .common{
      padding: 48rpx 0 30rpx;
      border-bottom: 1px solid #F1F4FB;
      &:last-child{
        border:0;
      }
    }
    .input {
        font-size: 30rpx;
        margin-top: 30rpx;
        height: 272rpx;
        line-height: 36rpx;
        color: #999;
    }

  }
    .camear_icon {
       
    }
    .row_view {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        margin-right: 20rpx;
        padding-top: 40rpx;
        image{
          width: 192rpx;
          height: 192rpx;
          margin-right: 20rpx;
        }
    }

</style>
